<!-- -->
<template>
  <div id='activecode'>
    <div class="ebtop">
      <div class="left">激活用户账号</div>
    </div>

    <div class="gradesell">
      <table border="1" width=100% cellspacing=0 rules=none frame=void>
          <tr class="nav navth">
            <th width=25%>交易时间</th>
            <th width=25%>用户名</th>
            <th width=25%>注册等级</th>
            <th width=25%>状态</th>
          </tr>
          </table>
          <div class="meslist">
             <table border="1" width=100% cellspacing=0 rules=none frame=void>
                <tr v-for="(item,index) in message" :key="index" class="nav">
                    <td width=25%>{{item.reg_time}}</td>
                    <td width=25%>{{item.user_name}}</td>
                    <td width=25%>{{item.user_rank}}</td>
                    <td width=25%><button class="btn" @click="getactive(index,item.id)">激活</button><button class="btn" @click="getdel(index,item.id)">删除</button></td>
                </tr>
            </table>
          </div>
        <div class="mesnull">暂无更多数据...</div>
    </div>
    <!-- 弹出窗口 -->
    <el-dialog title="确认激活" :visible.sync="dialogFormVisible" :close-on-click-modal=false style="width:70%;min-width:50%;margin-left:15vw;">
        <div class="alertmes">
            <ul>
                <li>用户名：&emsp;&emsp;<span>{{mymessage.user_name}}</span></li>              
                <li>交易时间：&emsp;<span>{{mymessage.reg_time}}</span></li>
                <li>注册等级：<span>&emsp;{{mymessage.user_rank}}</span>&emsp;</li> 
            </ul>
            <div class="btn">
                <button @click="open2(mymessage.id)">确定激活</button>
                <button @click="close">取消</button>
            </div>
            <!-- <div class="notice">* 确定激活后将从账户中扣除一个激活码。</div> -->
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'activecode',
  data () {
    return {
      message: [],
      mymessage: {},
      // 弹窗
      dialogFormVisible: false,
      index: '1',
    }; 
  },
  mounted() {
    this.loadmes(); 
  },
  methods: {
    loadmes () {
      this.axios.post('User/jihuo_list')
      .then(({data})=> {
        console.log(data);
        this.message = data.jihuo_list;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    getactive (index,id) {
      this.dialogFormVisible = true;
      this.index = index;
      this.axios.post('User/jihuo_lay',{
        id: id
      })
      .then(({data})=> {
        console.log(data);
        this.mymessage = data.info;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    getdel (index,id) {
      this.index = index;
      this.axios.post('User/user_del',{
        id: id
      })
      .then(({data})=> {
        console.log(data);
        if (data.status === '1') {
            this.$message({message: '删除成功',type: 'success'}); 
            this.message.splice(this.index,1);   
          } else if (data.status === '2') {
            this.$message({message: '操作失败',type: 'error'});                     
          }
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    close() {
      this.dialogFormVisible = false;
    },
    open2(id) {
      this.axios.post('User/jihuo_cl',{
        id: id
      })
      .then(({data})=> {
        console.log(data);
        if (data.status === '1') {
            this.$message({message: '激活币不足',type: 'error'}); 
            this.dialogFormVisible = false;
        } else if (data.status === '2') {
            this.$message({message: '激活成功',type: 'success'});
            this.dialogFormVisible = false;
            this.message.splice(this.index,1);  //删除已激活列                   
        } else if (data.status === '3') {
            this.$message({message: '激活失败',type: 'error'});  
            this.dialogFormVisible = false;
        }
      })
      .catch(function (error) {
        console.log(error);
      }); 
    }
  }
}

</script>

<style lang='scss' scoped>
#activecode {
  height: 100%;
  min-width: 1000px;
  min-height: 600px;
  position: absolute;
     bottom: 0;
     top: 0;
     left: 20px;
     right: 20px;
     overflow: auto;
  .ebtop {
    width: 100%;
    height: 55px;
    padding: 0 83px 0 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(153,153,153,1);
    .left {
      font-size:13px;
      font-family:MicrosoftYaHei-Bold;
      color:rgba(0,0,0,1);
      font-weight: 700;
      line-height:65px;
    }
  }
  .gradesell {
    // height: 100%;
    margin: 10px 20px;
    // border-bottom:1px solid rgba(153,153,153,1);
   .nav {
    font-size:13px;
    font-family:MicrosoftYaHei;
    color:rgba(102,102,102,1);
    line-height:45px;
    text-align: center;
    border-top:1px solid rgba(221,221,221,1);
    button{
      background-color: transparent;
    } 
    .btn {
      width:56px;
      height:28px;
      background:#FFA900;
      border-radius:3px;
      font-size:11px;
      font-family:MicrosoftYaHei;
      color:rgba(255,255,255,1);
    }
    .btn:nth-of-type(2) { 
      margin-left: 20px;
      background:rgba(225,225,225,1);
      color:rgba(0,0,0,1);
    }
   }
   .navth {
     line-height:45px;
     background-color: rgba(242,242,242,1);
     font-size:13px;
     font-family:MicrosoftYaHei;
     color:rgba(102,102,102,1);
   }
   .meslist tr{
    &:hover {
     background-color: #f0f0f0;
    }
   }
   .mesnull {
      font-size:14px;
      font-family:MicrosoftYaHei;
      color:rgba(102,102,102,1);
      line-height:50px;
      text-align: center;
    }
  }
  .alertmes {
     margin-left: 40px;
     margin-top: -30px;
     min-width: 550px;
     li {
        line-height: 40px;
        font-size:12px;
        font-family:MicrosoftYaHei;
        color:rgba(102,102,102,1);
        span {
            font-weight: 700;
        }
     }
     input {
        width:209px;
        height:33px;
        padding-left: 5px;
        border-radius:2px;
        border:1px solid rgba(151,151,151,1);
     } 
  .btn {
    margin-top: 30px;
    button {
     width:82px;
     height:33px;
     background:#FFA900;
     font-size:12px;
     font-family:MicrosoftYaHei;
     color:rgba(255,255,255,1); 
     border-radius:2px;
    }
    button:nth-of-type(2) {
     margin-left: 25px;
     background:rgba(225,225,225,1);
     color:rgba(0,0,0,1);
    }  
  }
  .notice {
    font-size: 12px;
    line-height: 40px;
  } 
 }
}
</style>